<template>
  <div class="w-full h-full">
    <div class="dv-decoration-5">
      <svg
        :style="{
          width: '300px',
          height: '40px',
          transformOrigin: 'left',
          transform: `scale(${scale})`,
        }"
      >
        <polyline
          fill="transparent"
          points="0,8 54,8 60,16 75,16 81,24 216,24 225,16 240,16 245.99999999999997,8 300,8"
          stroke="#3f96a5"
          :stroke-width="info.extension.lineWidth1.value"
        >
          <!-- <animate
            attributeName="stroke-dasharray"
            attributeType="XML"
            begin="0s"
            calcMode="spline"
            :dur="`${info.extension.dur.value}s`"
            from="0, 157.52079728939617, 0, 157.52079728939617"
            keySplines="0.4,1,0.49,0.98"
            keyTimes="0;1"
            repeatCount="indefinite"
            to="0, 0, 315.04159457879234, 0"
          /> -->
        </polyline>
        <polyline
          v-show="info.extension.showLine2.value"
          fill="transparent"
          points="90,32 210,32"
          stroke="#3f96a5"
          :stroke-width="info.extension.lineWidth2.value"
        >
          <!-- <animate
            attributeName="stroke-dasharray"
            attributeType="XML"
            begin="0s"
            calcMode="spline"
            :dur="`${info.extension.dur.value}s`"
            from="0, 60, 0, 60"
            keySplines=".4,1,.49,.98"
            keyTimes="0;1"
            repeatCount="indefinite"
            to="0, 0, 120, 0"
          /> -->
        </polyline>
      </svg>
    </div>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  export default defineComponent({
    name: 'UiDecoration1',
    components: {},
    inject: {
      hasPreview: { default: false },
    },
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    data() {
      return {
        scale: 1,
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.scale = parseFloat(this.$el.offsetWidth) / 300
      })
      let resizeObserver = new ResizeObserver(() => {
        this.scale = parseFloat(this.$el.offsetWidth) / 300
      })
      resizeObserver.observe(this.$el)
    },
  })
</script>
<style scoped>
  .dv-decoration-5 {
    position: relative;
    width: 100%;
    height: 100%;
  }
</style>
